<template>
  <div>
    <q-list bordered class="rounded-borders  no-shadow">
      <q-expansion-item
        switch-toggle-side
        expand-separator
        header-class="bg-grey-2"
        label="联系人信息"
      >
        <template v-slot:header>
          <div align="right" style="padding-top:5px;">工商信息</div>
          <div  style="position: absolute;right:0;top:5px;z-index:86;margin-right:30px;">
            <!-- <q-btn outline size="xs" color="nlack" :label="$t('保存')" @click.stop="saveHandler"/> -->
          </div>
        </template>
        <q-separator />
         <q-card>
          <q-card-section>
            <div class="row q-col-gutter-sm">
              <div class="col-3">
                <div>统一社会信用号</div>
                <q-input
                  disable
                  borderless
                  v-model="addOrEditForm.creditNumber"
                  dense hint/>
              </div>
            </div>
          </q-card-section>
         </q-card>
      </q-expansion-item>
      <q-expansion-item
        switch-toggle-side
        expand-separator
        header-class="bg-grey-2"
        label="联系人信息"
      >
        <template v-slot:header>
          <div align="right" style="padding-top:5px;">联系人信息</div>
        </template>
        <q-separator />
        <Contacts :id="id"></Contacts>
      </q-expansion-item>
    </q-list>
  </div>
</template>

<style lang="stylus" scoped>
  /deep/.q-item
    min-height 30px
    max-height 35px
  .h-td-maxwidth
    max-width 200px
  #name
    padding 0px
</style>

<script>
import Contacts from 'src/pages/Mdm/Suppliers/SupplierPreview/BasicPreview/Contacts'
export default {
  name: 'Basic',
  components: {
    Contacts
  },
  props: {
    id: {}
  },
  data () {
    return {
      addOrEditForm: {
        creditNumber: ''
      }
    }
  },
  computed: {
  },
  validations: {
  },
  watch: {
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      await this.mainInfoGet()
    },
    async mainInfoGet () {
      await this.$api({
        method: 'get',
        url: `/mdm/supplierMstr/findById/${this.$route.params.id}`,
        successCallback: ({ data }) => {
          this.addOrEditForm = { ...data }
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    async saveHandler () {
      await this.$api({
        method: 'put',
        url: `/mdm/supplierMstr/update`,
        params: this.addOrEditForm,
        emulateJSON: true,
        useLoadLayer: true,
        useNotify: true,
        successCallback: ({ data }) => {
          console.log(data)
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  }
}
</script>
